*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: sans-serif;
     list-style: none;
     text-decoration: none;
     
}

body{
     background-color: #f3f3f3;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     // font-size: 16px;
    
}
p,h1{
     
}

.ui_tab{
     
     width: 600px;
     background-color: white;
     padding: 30px;
     // box-shadow:  0 2px 16px rgba($color: #000000, $alpha: .9);
     box-shadow:  0 2px 16px rgba(0, 0, 0, .1);
     border-radius: 20px;
     position: relative;

     .tab_header{
          border-bottom: 1px solid rgb(229, 229, 229);
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          .line{
               width: 80px;
               height: 5px;
               background-color: #7360ff;
               position: absolute;
               top: 58px;
               left: 0;
               border-radius: 16px;
               transition: all .3s ease-in-out;
          }
     }

     .tab_btn{
          font-size: 18px;
          font-weight: 600;
          color: #919191;
          background:none;
          border: none;
          padding: 18px;
          cursor: pointer;

          &.active{
               color: #7360ff;
          }
     }

     .tab_main{
          padding: 20px;

          .tab_content{
               display: none;
               animation: moving .5s ease;
               &.active{
                    display: block;
               }
               h1{
                    margin-bottom: 10px;
               }

               @keyframes moving {
                    from{transform: translateX(50px); opacity: 0;}         
                    to{transform: translateX(0px); opacity: 1;}           
               }
          }
     }
    

}